<template>
  <div class="w-1200-container">
    <Bread />
    <!-- 公司简介 -->
    <div class="brief-card">
      <div class="icon-box">
        <el-image :src="info.picture" fit="contain">
          <el-image slot="error" :src="defaultIcon" fit="contain"> </el-image>
        </el-image>
      </div>
      <div class="content">
        <h6>{{ info.comName }}</h6>
        <div class="sub">
          <div class="sub-line">
            <span v-if="info.phonenumber" class="sub-line-item">
              电话： {{ info.phonenumber }}
            </span>
            <span v-if="info.website" class="sub-line-item">
              官网：
              <a class="text-blue-500 hover:text-blue-500" :href="info.website">
                {{ info.website }}
              </a>
            </span>
          </div>
          <div class="sub-line">地址： {{ info.addres }}</div>
          <div class="sub-line">
            <span v-if="info.industry" class="sub-line-item">
              行业： {{ info.industry }}
            </span>
            <span v-if="info.fieldName" class="sub-line-item">
              领域： {{ info.fieldName }}
            </span>
            <span v-if="info.park" class="sub-line-item">
              园区： {{ info.park }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 公司详情 -->
    <ul class="nav-line-box">
      <li v-for="item in navlist" :key="item.name" class="nav-line-item">
        <div class="item-content" @click.stop="jumpTo(item.hrefname)">
          <!-- <a :href="'#' + item.hrefname"> {{ item.name }} </a> -->
          <div>{{ item.name }}</div>
        </div>
      </li>
    </ul>

    <div class="my-12">
      <div class="detail-item-box" id="entryStatus">
        <h6>入榜情况</h6>
        <!-- <ul class="content"></ul> -->
        <ul class="content level-box">
          <!-- <li class="level-box-item">
            <level-link-card title="2020年度江西省种子独角兽企业榜单" />
          </li>
          <li class="level-box-item">
            <level-link-card title="2021年度江西省种子独角兽企业榜单" />
          </li>
          <li class="level-box-item">
            <level-link-card title="2022年度江西省种子独角兽企业榜单" />
          </li> -->
          <li
            class="level-box-content"
            v-for="(item, index) in believeData"
            :key="'believe' + index"
          >
            {{
              item.believeYear
                ? item.believeYear +
                  "年度" +
                  (item.dictLabel ? item.dictLabel : "")
                : item.dictLabel
                ? item.dictLabel
                : ""
            }}
          </li>
        </ul>
      </div>

      <!-- <div class="detail-item-box" id="growCanvas">
        <h6>成长性画像</h6>
        <div class="content">
          <el-table
            :data="growData"
            border
            style="width: 100%"
            :cell-style="cellStyle"
            :header-cell-style="headStyle"
          >
            <el-table-column type="index" label="序号"> </el-table-column>
            <el-table-column prop="levelname" label="榜单名称">
            </el-table-column>
            <el-table-column prop="are" label="榜单位置">
              <slot slot-scope="scope"> 第 {{ scope.row.are }} 名 </slot>
            </el-table-column>
            <el-table-column label="公司名称">
              <slot slot-scope>
                {{ info.comName }}
              </slot>
            </el-table-column>
            <el-table-column prop="time" label="发布时间" width="180">
            </el-table-column>
          </el-table>
        </div>
      </div> -->

      <div class="detail-item-box" id="baseInfo">
        <h6>基本信息</h6>
        <p class="content" v-html="info.inform"></p>
      </div>

      <div class="detail-item-box" id="businessInfo">
        <h6>工商信息</h6>
        <div class="content">
          <div class="content-title">工商注册信息</div>
          <table class="self-talbe">
            <tr class="self-tr">
              <th class="min-td-width">统一社会信用代码</th>
              <td>
                {{ info.creditCode }}
              </td>

              <th class="min-td-width">公司类型</th>
              <td>
                {{ info.comType }}
              </td>
            </tr>

            <tr class="self-tr">
              <th>法人</th>
              <td>
                {{ info.legalPerson }}
              </td>

              <th>注册资本</th>
              <td>
                {{ info.regCapital }}
              </td>
            </tr>

            <tr class="self-tr">
              <th>成立时间</th>
              <td>
                {{ info.estaTime }}
              </td>

              <th>登记状态</th>
              <td>
                {{ info.regStatus }}
              </td>
            </tr>

            <tr class="self-tr">
              <th>经营期限</th>
              <td>
                {{ info.operaPeriod }}
              </td>

              <th>登记机关</th>
              <td>
                {{ info.regAuthority }}
              </td>
            </tr>
            <tr class="self-tr">
              <th>经营范围</th>
              <td colspan="3" class="text-left">
                {{ info.operaRange }}
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDetailById, selectEnterpriseBelieveData } from "@/api/info.js";

import Bread from "@/components/Bread";
import LevelLinkCard from "@/views/components/LevelLinkCard";
export default {
  components: {
    Bread,
    LevelLinkCard,
  },
  data() {
    return {
      defaultIcon: require("@/assets/images/company/default.png"),
      info: {
        comName: "",
        comType: "",
        legalPerson: "",
        regCapital: "",
        estaTime: "",
        regStatus: "",
        operaPeriod: "",
        regAuthority: "",
        operaRange: "",
        picture:
          "",
        phonenumber: "",
        website: "",
        creditCode: "",
        addres:
          "",
        field: "",
        operaRange:
          "",
        inform: ``,
      },
      navlist: [
        { name: "入榜情况", hrefname: "entryStatus" },
        // { name: "成长画像", hrefname: "growCanvas" },
        { name: "基本信息", hrefname: "baseInfo" },
        { name: "工商信息", hrefname: "businessInfo" },
      ],

      cellStyle: {
        textAlign: "center",
        padding: ".9rem 0",
        fontWeight: "400",
      },
      headStyle: {
        textAlign: "center",
        backgroundColor: "#e4eef6",
        padding: ".9rem 0",
      },
      growData: [
        {
          levelname: "2020年度GEI中国潜在独角兽企业榜单",
          are: 52,
          time: 2021,
        },
        {
          levelname: "2020年度GEI中国潜在独角兽企业榜单",
          are: 1,
          time: 2020,
        },
      ],

      // 入榜情况
      believeData: [],
    };
  },
  async created() {
    this.getInfo();
  },
  mounted() {
    this.getBelieveData();
  },
  methods: {
    async getInfo() {
      let id = this.$route.params.id || 0;

      if (!id) {
        this.$router.push({
          path: "/404",
        });
      }
      let res = await getDetailById(id);
      if (res.code === 200) {
        this.info = res.data;
      }
    },
    // 获取排行榜信息
    getBelieveData() {
      selectEnterpriseBelieveData(this.$route.params.id || 0).then((res) => {
        this.believeData = res.data;
      });
    },

    jumpTo(element) {
      document.querySelector("#" + element).scrollIntoView({
        behavior: "smooth",
        block: "start",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.brief-card {
  background-color: #f1f3fb;
  @apply flex p-6;
  .icon-box {
    width: 165px;
    height: 141px;
    padding-right: 24px;
    .el-image {
      width: 141px;
      height: 141px;
    }
  }
  .content {
    @apply flex-1 flex-grow;
    .sub {
      @apply mt-4 leading-8;

      .sub-line {
        @apply text-t666;
        .sub-line-item {
          min-width: 10rem;
          @apply inline-block mr-20;
        }
      }
    }
  }
}

.detail-item-box {
  @apply mb-8;

  .content {
    // min-height: 200px;
    @apply mt-8;

    .content-title {
      @apply text-blue-600 font-bold mb-2;
    }
  }

  .content-ul {
    li {
      @apply mb-4 text-sm leading-6;
    }
  }
}

.nav-line-box {
  @apply relative flex justify-center h-16 border-b border-gray-200 my-4;
  .nav-line-item {
    @apply flex-1 flex-grow  flex justify-center text-center;

    .item-content,
    .item-content-active {
      @apply flex flex-col justify-center w-2/5 h-16 border-b cursor-pointer;
    }
    .item-content-active {
      @apply border-blue-500;
    }
  }

  .nav-line-item:hover {
    .item-content {
      @apply border-blue-500 text-blue-500;
    }
  }
}

.level-box {
  @apply grid grid-cols-3 mt-8;

  .level-box-item {
    @apply pr-8;
  }

  .level-box-content {
    @apply mr-4 w-80 h-16 flex justify-center align-middle items-center border border-green-300 hover:border-red-400 text-blue-500 cursor-pointer;
  }
}

.self-talbe {
  border-collapse: collapse;

  .self-tr {
    border: 1px solid #efefef;
    text-align: center;
    th,
    td {
      min-height: 4rem;
      height: 4rem;
    }
    td {
      min-width: 18rem;

      border: 1px solid #efefef;
      padding: 1rem 0.5rem;
    }
  }
  .min-td-width {
    min-width: 10rem;
  }
}
</style>
